import React, { Component } from "react";
import moment from 'moment';
export default class App extends Component {

  state = {
    msgs: [
      '天王盖地虎',
      '提莫一米五',
      '团战可以输',
      '提莫必须死'
    ]
  }

  send = () => {
    //获取 input 框中的文本
    let v = this.input.value;
    this.setState({
      msgs: [...this.state.msgs, v]
    })
  }

  render() {
    return ( 
      <div>
        <input type="text" ref={el => this.input = el} /><button onClick={this.send}>发送</button>
        <hr />
        <div ref={el => this.box = el} style={{width: '400px', height: '200px', border: 'solid 1px #369', overflowY: 'scroll'}}>
          <ul>
            {
              this.state.msgs.map((item, index) => {
                return <li key={index}>{item}</li>
              })
            }
          </ul>
        </div>
      </div>
    );
  }

  //组件完成更新生命周期钩子
  componentDidUpdate(){
    //更新元素的滚动高度
    this.box.scrollTop = this.box.scrollHeight;
  }

 

}
